<template>
  <div class="app-container">
    <el-card shadow="always" class="box-card">
      <el-form ref="form" :model="supplierForm" label-width="80px" size="mini">
        <el-form-item label="供应商:">
          <!-- <el-input v-model="supplierForm.SupplierName" /> -->
          <el-select v-model="supplierForm.supplier_id" placeholder="请选择供应商" clearable>
            <el-option
              v-for="item in supplierList"
              :key="item.id"
              :label="item.supplier_name"
              :value="item.id"
            />
          </el-select>

        </el-form-item>
        <el-form-item>
        <!-- <el-button type="primary" @click="onSubmit">立即创建</el-button>
          <el-button>取消</el-button> -->
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 供应商商品列表 -->
    <el-card shadow="always" class="grouping box-card" style="margin-top: 20px">

      <el-table
        v-loading="supplierGoodsListLoading"
        :data="supplierGoodsList"
        :header-cell-style="{
          'background-color': '#f3f8fe',
          color: '#606266',
          height: '50px',
        }"
        highlight-current-row
        style="width: 100%"
        @expand-change="handleExpandChange"
      >

        <el-table-column type="expand">
          <template slot-scope="props">
            <el-table
              :ref="'multipleTable'+props.row.id"
              v-loading="isLoadingSku"
              :data="supplierGoodsSkuList"
              border
              stripe
              @selection-change="handleSelectionChange"
            >
              <el-table-column
                type="selection"
                align="center"
              />
              <el-table-column
                label="商品ID"
                align="center"
                prop="goods_id"
                width="100"
              />
              <el-table-column
                label="规格名称"
                align="center"
                prop="sku_name"
              />
              <el-table-column
                label="零售价"
                align="center"
                prop="retail_price"
                width="100"
              />
              <el-table-column
                label="当前库存"
                align="center"
                prop="inventory"
                width="100"
              />
              <el-table-column
                label="选择库存"
                align="center"
              >
                <template slot-scope="scope">
                  <el-input-number
                    v-model="scope.row.chooseInventory"
                    size="normal"
                    :min="1"
                    :max="scope.row.inventory"
                    :step="1"
                    :controls="true"
                    controls-position="both"
                  />
                </template>
              </el-table-column>
            </el-table>
            <el-row :gutter="20">
              <el-col :span="12" :offset="0">
                <el-cascader
                  :ref="'multipleCascader'+props.row.id"
                  v-model="props.row.gc_id"
                  :options="goodsCategoryList"
                  :props="{ expandTrigger: 'hover',emitPath:false, checkStrictly: true, value: 'id', label: 'name' }"
                  placeholder="请选择类目ID"
                  @change="handleGoodsCategoryChange"
                />
              </el-col>
            </el-row>
          </template>
        </el-table-column>

        <el-table-column
          align="center"
          label="商品主图"
          prop="goods_name"
          min-width="40"
        >
          <template slot-scope="scope">
            <el-image v-if="scope.row.main_image" :src="scope.row.main_image" />
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="产品名称"
          prop="goods_name"
        />
        <el-table-column
          align="center"
          label="商品类型"
        >
          <template slot-scope="scope">
            <div>{{ scope.row.type | goodsType }}</div>
          </template>
        </el-table-column>

        <el-table-column
          align="center"
          label="上架状态"
        >
          <template slot-scope="scope">
            <!-- "status": 0, //商品上下架状态 0下架 1上架 -->
            <div v-if="scope.row.status === 0">下架</div>
            <div v-if="scope.row.status === 1">上架</div>
          </template>
        </el-table-column>
        <!-- <el-table-column
          align="center"
          label="操作"
        >
          <template slot-scope="scope">
            <el-button type="text" size="mini" @click="chooseGoodsSku(scope.row.id)">选择规格</el-button>

          </template>
        </el-table-column> -->

      </el-table>

      <el-row :gutter="20" style="margin-top:10px;">
        <el-col :span="12" :offset="0">
          <el-button type="primary" size="mini" @click="doSaveSelectGoods">确定</el-button>
          <el-button type="primary" size="mini" @click="closeDialog">取消</el-button>
        </el-col>
      </el-row>
    </el-card>

    <!-- 选品sku列表弹框 -->
    <el-dialog
      :close-on-click-modal="false"
      :title="title"
      :visible.sync="isShowSkuDialog"
      width="60%"
      @close="closeDialog"
    >
      <el-table
        ref="multipleTable"
        v-loading="isLoadingSku"
        :data="supplierGoodsSkuList"
        border
        stripe
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          type="selection"
          align="center"
        />
        <el-table-column
          label="商品ID"
          align="center"
          prop="goods_id"
          width="100"
        />
        <el-table-column
          label="规格名称"
          align="center"
          prop="sku_name"
        />
        <el-table-column
          label="零售价"
          align="center"
          prop="retail_price"
          width="100"
        />
        <el-table-column
          label="当前库存"
          align="center"
          prop="inventory"
          width="100"
        />
        <el-table-column
          label="选择库存"
          align="center"
        >
          <template slot-scope="scope">
            <el-input-number
              v-model="scope.row.chooseInventory"
              size="normal"
              :min="1"
              :max="scope.row.inventory"
              :step="1"
              :controls="true"
              controls-position="both"
            />
          </template>
        </el-table-column>
      </el-table>

    </el-dialog>
  </div>
</template>
<script>
import { goodslist, supplierLists, getGoodsProductList } from '@/api/supplier/index'
import { getCategoryList } from '@/api/commodity/index'
import { selectionadd } from '@/api/merchant/index'
export default {
  name: 'AddSelectGoods',
  components: {},
  filters: {
    // 1普通商品 2卡密商品 3虚拟商品
    goodsType(type) {
      switch (type) {
        case 1:
          return '普通商品'
        case 2:
          return '卡密商品'
        case 3:
          return '虚拟商品'
      }
    }
  },
  data() {
    return {
      gc_id: '', // 平台商品分类ID
      isLoadingSku: false,
      title: '选品sku',
      supplierGoodsListLoading: false,
      goodsCategoryList: [], // 商品分类列表
      isShowSkuDialog: false, // 是否显示选品sku弹框
      supplierForm: {}, // 供应商商品搜索表单
      supplierGoodsList: [], // 供应商商品列表
      supplierGoodsSkuList: [], // 供应商产品规格列表
      supplierList: [], // 供应商列表
      tableRefs: new Set(),
      cascaderRefs: new Set()
    }
  },
  created() {
    this.getSupplierLists()
    this.getSupplierGoodsList()
    this.getGoodsCategoryList()
  },
  methods: {
    // 获取供应商列列表
    async getSupplierLists() {
      this.supplierGoodsListLoading = true
      const res = await supplierLists()
      const { code, data, message } = res
      if (code === 200) {
        this.supplierList = data
      } else {
        this.$message.error(message)
      }
      this.supplierGoodsListLoading = false
    },
    // 获取供应商产品列表
    async getSupplierGoodsList() {
      const res = await goodslist(this.supplierForm)
      const { code, data, message } = res
      if (code === 200) {
        data.list.forEach(item => {
          item.gc_id = ''
        })
        this.supplierGoodsList = data.list
      } else {
        this.$message.error(message)
      }
    },

    // 选择供应商商品sku
    async chooseGoodsSku(id) {
      // this.isShowSkuDialog = true
      this.isLoadingSku = true
      const res = await getGoodsProductList({ GoodsId: id })
      const { data, code, message } = res
      if (code === 200) {
        data.forEach(item => {
          item.chooseInventory = 1
        })
        this.supplierGoodsSkuList = data
      } else {
        this.$message.error(message)
      }
      this.isLoadingSku = false
    },
    // 关闭sku弹窗
    closeDialog() {
      this.isShowSkuDialog = false
    },
    // 获取商品类目
    async getGoodsCategoryList() {
      const res = await getCategoryList()
      const { code, data, message } = res
      if (code === 200) {
        this.goodsCategoryList = data
      } else {
        this.$message.error(message)
      }
    },
    // 多选框发生改变
    handleSelectionChange(val) {
      // console.log('val==>', val)
    },
    // 表格展开事件
    handleExpandChange(row, expandedRows) {
      console.log('row====>', row)
      console.log('expandedRows====>', expandedRows)
      if (expandedRows.length > 0) { // 展开
        this.chooseGoodsSku(row.id)
        this.tableRefs.add(row.id)
      }
    },
    // 商品类目发生改变
    handleGoodsCategoryChange(value) {
      console.log('value==>', value)
    },
    // 确定添加选品sku
    async doSaveSelectGoods() {
      if (this.tableRefs.size === 0) {
        this.$message.warning('至少选择一个商品的一个sku')
        return
      }
      const tempObj = {
        sku: []
      }
      this.tableRefs.forEach(goodsId => {
        // 当前商品选中的sku列表
        const selectedSku = this.$refs['multipleTable' + goodsId].selection
        const goods = this.supplierGoodsList.find(item => goodsId === item.id)
        if (!goods.gc_id) {
          this.$message.warning(`请选择商品[${goods.name}]的类目ID`)
          return
        }
        if (selectedSku.length > 0) {
          selectedSku.forEach(item => {
            tempObj.sku.push({
              id: item.id,
              inventory: item.chooseInventory,
              gc_id: goods.gc_id
            })
          })
        }
      })
      const res = await selectionadd(tempObj)
      const { code, message } = res
      if (code === 200) {
        this.$message.success(message)
      } else {
        this.$message.error(message)
      }
    }
  }
}
</script>
<style lang='scss' scoped>
</style>
